
import Taro, {Component} from '@tarojs/taro'
import {View, Text, Image, RichText} from '@tarojs/components'
import {getRuntime} from '../../utils/common'

import './queryAuth.less'

import icon_07 from '../../assets/img/icon_05.png'


class Problem extends Component {
  state = {
    items: [
     /* {
        id: 1,
        title: '湖北省电子税务局(电脑打开)',
        url: 'https://etax.hubei.chinatax.gov.cn/portal/',
        desc: ''
      },
      {
        id: 2,
        title: '江西省电子税务局',
        url: ' https://etax.jiangxi.chinatax.gov.cn/etax/jsp/v2/login_v2_init.jsp',
        desc: ''
      },*/
      {
        id: 3,
        title: '云南省电子税务局',
        url: 'https://etax.yunnan.chinatax.gov.cn/zjgfdzswj/main/index.html',
        desc: ''
      },
      /*{
        id: 4,
        title: '河南省电子税务局',
        url: '',
        desc: `应用商店下载网上税务局 (河南版的APP) <br />
            查询流程：<br />
            1、登录首页<br />
            2、查一查<br />
            3、税票真伪查询<br />
            4、车船税完税证<br />`
      }*/
    ]
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '真伪查询'})
  }

  copyLink(url: string) {
    Taro.setClipboardData({ data: url })
      .then(res => {
        console.log(res)
        getRuntime().showToast('复制成功!' )
      })
      .catch(() => {
        getRuntime().showToast('你的浏览器不支持复制功能, 请在pc端打开浏览器自动搜索该税务局!' )
      })
  }

  render() {
    let { items } = this.state
    return (
      <View className='problem'>
        {
          items.map(item => {
            return(
              <View className='problem-item'>
                <View className='problem-item__top'>
                  <Image className='problem-item__icon' src={icon_07} />
                  <Text className='problem-item__title'>{item.title}</Text>
                  {item.url&& <View className='copy-link' onClick={this.copyLink.bind(this,item.url)}>复制链接</View>}
                </View>
                <View className='problem-item__desc'>
                  <RichText nodes={item.url || item.desc} />
                </View>
              </View>
            )
          })
        }
        <View className='query-auth-info color-theme'>注意：以纳税人身份注册后进行查询</View>
      </View>
    )
  }
}

export default Problem
